<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>WireIt - WiringEditor</title>

<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../../../../lib/yui/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="../../../../lib/yui/assets/skins/sam/skin.css" />

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../../../inputex/lib/inputex/css/inputEx.css' />

<!-- YUI-accordion CSS -->
<link rel="stylesheet" type="text/css" href="../../lib/accordionview/assets/skins/sam/accordionview.css" />

<!-- WireIt CSS -->
<link rel="stylesheet" type="text/css" href="../../../../assets/WireIt.css" />
<link rel="stylesheet" type="text/css" href="../../assets/WireItEditor.css" />

<style>
div.WireIt-Container {
	width: 350px; /* Prevent the modules from scratching on the right */
}

div.WireIt-InOutContainer {	
	width: 150px;
}

div.WireIt-InputExTerminal {
	float: left;
	width: 21px;
	height: 21px;
	position: relative;
}
div.WireIt-InputExTerminal div.WireIt-Terminal {
	top: -3px;
	left: -7px;
}
div.inputEx-Group div.inputEx-label {
	width:100px;
}

div.WireIt-ImageContainer {
	width: auto;
}

div.Bubble div.body {
	width: 70px;
	height: 45px;
	opacity: 0.8;
	cursor: move;
}

.WiringEditor-module span {
	position: relative;
	top: -3px;
}

</style>




<!-- YUI -->
<script type="text/javascript" src="../../../../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../../../../lib/yui/resize/resize-min.js"></script>
<script type="text/javascript" src="../../../../lib/yui/layout/layout-min.js"></script>
<script type="text/javascript" src="../../../../lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="../../../../lib/yui/json/json-min.js"></script>
<script type="text/javascript" src="../../../../lib/yui/button/button-min.js"></script>
<script type="text/javascript" src="../../../../lib/yui/tabview/tabview-min.js"></script>
<script src="../../lib/accordionview/accordionview-min.js"  type='text/javascript'></script>
<script type="text/javascript" src="../../../../lib/excanvas.js"></script>

<!-- WireIt -->
<script type="text/javascript" src="../../../../build/wireit-inputex-editor-min.js"></script>
<script type="text/javascript" src="../../js/adapters/json-rpc.js"></script>
<script type="text/javascript" src="demo.js"></script>


<style>
/* Comment Module */
div.WireIt-Container.WiringEditor-module-comment { width: 200px; }
div.WireIt-Container.WiringEditor-module-comment div.body { background-color: #EEEE66; }
div.WireIt-Container.WiringEditor-module-comment div.body textarea { background-color: transparent; font-weight: bold; border: 0; }


body { text-align: left;}
h1 { font-size: 18px; font-weight: bold; margin: 30px;}

</style>


<script>

// InputEx needs a correct path to this image
inputEx.spacerUrl = "/inputex/trunk/images/space.gif";


YAHOO.util.Event.onDOMReady( function() {
	
	demoLanguage.layoutOptions = {
		
		width: 600,
	 	height: 400,
	
		units: [
			{ position: 'top', height: 57, body: 'top'},
			{ position: 'left', width: 200, resize: true, body: 'left', gutter: '5px', collapse: true,
				collapseSize: 25, header: 'Modules', scroll: true, animate: true },
			{ position: 'center', body: 'center', gutter: '5px' },
			{ position: 'right', width: 320, resize: true, body: 'right', gutter: '5px', collapse: true,
					collapseSize: 25, animate: true }
		]
	};
	
	demoLanguage.parentEl = 'wiring-editor-widget';
	
	var editor = new WireIt.WiringEditor(demoLanguage); 
	
	// Open the infos panel
	editor.accordionView.openPanel(2);
	
	// collapse
	editor.layout._units.right.collapse();
	editor.layout._units.left.collapse();
	//console.log(editor);
	
});

</script>

</head>

<body class="yui-skin-sam">

	<h1>Example of the WiringEditor within a Page</h1>
	
	<p style="margin: 30px;">This is an example</p>

	<div id="wiring-editor-widget" style="width: 600px; height: 400px; margin: 30px;">

		<div id="top">
			<div class="logo">WiringEditor</a></div>
			<div id="toolbar"></div>
			<div class="topright">
				<span>Hello there !</span> | 
				<a href="../..">back to WireIt</a>
			</div>
		</div>


		<div id="left">
		
			 <ul id="modulesAccordionView">
				<li>
					<h2>Main</h2>
					<div>
						<div id='module-category-main'></div>
					</div>
				</li>
			
				<li>
					<h2>Form Modules</h2>
					<div>
						<div id='module-category-form'></div>
					</div>
				</li>
			
				<li>
					<h2>Image Modules</h2>
					<div>
						<div id='module-category-images'></div>
					</div>
				</li>
			</ul>
		
		</div>
	
		<div id="right">
		  <ul id="accordionView">
			<li>
				<h2>Properties</h2>
				<div>
					<div id="propertiesForm"></div>
				</div>
			</li>
			<li>
				<h2>Minimap</h2>
				<div style='position: relative;'>
					<div id="layerMap"></div>
				</div>
			</li>
			<li>
				<h2>Infos</h2>
				<div>
					<div style="padding: 10px;">
						<p>This example shows how to use the <i>ImageContainer</i> and <i>FormContainer</i> in a language definition.</p>
						<br />
						<p><b>Drag and drop modules from the Module list</b> on the left to the working layer in the middle.</p>
						<br />
						<p><a href="demo.js" target="_new">Click here to view the language definition for this editor.</a></p>
					</div>
				</div>
			</li>
		
		  </ul>
		</div>

		<div id="center">
		</div>
		
	</div>
	
	<div id="helpPanel">
	    <div class="hd">Welcome to the WiringEditor demonstration</div>
	    <div class="bd" style="text-align: left;">
					
					<p>This example shows how to use the <i>ImageContainer</i> and <i>FormContainer</i> in a language definition.</p>
					<br />
					<p><b>Drag and drop modules from the Module list</b> on the left to the working layer in the middle.</p>
					<br />
					<p><a href="demo.js" target="_new">Click here to view the language definition for this editor.</a></p>
					<br />
					<p>Close this dialog to test the WiringEditor</p>
	    </div>
	</div>

</body>
</html>